<template>
  <!-- 图表容器：宽高用相对单位 -->
  <div class="line-chart-container" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineChart',
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null,
      // 缓存当前屏幕宽度，用于动态调整配置
      screenWidth: window.innerWidth
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) this.chart.dispose();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartRef;
      this.chart = echarts.init(chartDom);
      this.updateChartOptions(); // 单独抽离配置，便于动态更新
    },

    // 生成自适应配置项（核心）
    getAdaptiveOptions() {
      const legendFontSize = (14 / 1920) * this.screenWidth;

      return {
        tooltip: {
          trigger: 'axis', // 触发类型：坐标轴触发（鼠标移到轴上显示对应所有系列数据）
          backgroundColor: 'rgba(0, 11, 61, 0.9)', //  tooltip 背景色（与底色呼应，加深一点）
          borderColor: 'rgba(255, 255, 255, 0.2)', // 边框色（浅色透明，避免突兀）
          borderWidth: 1,
          textStyle: {
            fontSize: legendFontSize,// 提示框文字：用px2font
            color: '#fff'
          },
          confine: false, // 允许 tooltip 超出图表容器（避免被截断）
          zIndex: 9999,   // 提高层级，确保在最上层显示
          appendToBody: true, // 关键：强制挂载到body，脱离父容器限制
          position: 'auto' // 自动计算最佳位置，避免靠近屏幕边缘被截断
        },
        legend: {
          // data: ['安全指数', '人员安全', '生产安全', '设备安全', '消防安全', '环境安全'],
          data: this.chartData.legendData,
          top: '0%',          // 垂直方向：顶部对齐（保持原配置）
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: legendFontSize, // 图例字体自适应
          },
          itemWidth: legendFontSize, // 图标宽度（按需调整，如12、16等）
          itemHeight: legendFontSize, // 图标高度（与宽度保持一致，实现正方形）
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.chartData.xData,
          boundaryGap: false, // 取消留白，标签对齐数据点
          axisTick: {alignWithLabel: true},
          axisLine: {lineStyle: {color: '#ccc'}},
          axisLabel: {
            color: '#ccc',
            fontSize: legendFontSize,
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {color: '#ccc', type: 'dashed'}
          },
          axisLabel: {
            color: '#ccc',
            fontSize: legendFontSize,
          },
          splitLine: {
            show: true,
            lineStyle: {type: 'dashed', color: 'rgba(255,255,255,0.1)', width: 1}
          }
        },
        series: [
          {
            name: '安全指数', type: 'line', data: this.chartData.seriesData1,
            lineStyle: {width: 2, color: '#FA5151'},
            itemStyle: {color: '#FA5151'},
          },
          {
            name: '人员安全', type: 'line', data: this.chartData.seriesData2,
            lineStyle: {width: 2, color: '#3662EC'},
            itemStyle: {color: '#3662EC'},
          },
          {
            name: '生产安全', type: 'line', data: this.chartData.seriesData3,
            lineStyle: {width: 2, color: '#FF8F1F'},
            itemStyle: {color: '#FF8F1F'},
          },
          {
            name: '设备安全', type: 'line', data: this.chartData.seriesData4,
            lineStyle: {width: 2, color: '#FFC300'},
            itemStyle: {color: '#FFC300'},
          },
          {
            name: '消防安全', type: 'line', data: this.chartData.seriesData5,
            lineStyle: {width: 2, color: '#00B578'},
            itemStyle: {color: '#00B578'},
          },
          {
            name: '环境安全', type: 'line', data: this.chartData.seriesData6,
            lineStyle: {width: 2, color: '#07B9B9'},
            itemStyle: {color: '#07B9B9'},
          }
        ]
      };
    },

    // 更新图表配置
    updateChartOptions() {
      const option = this.getAdaptiveOptions();
      this.chart.setOption(option);
    },

    // 处理窗口 resize
    handleResize() {
      // 防抖：避免频繁触发
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.screenWidth = window.innerWidth; // 更新屏幕宽度
        this.chart && this.chart.resize(); // 调整图表尺寸
        this.updateChartOptions(); // 重新生成自适应配置
      }, 100);
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newData) {
        // 修复数据更新逻辑（之前的写法错误，需逐个更新系列数据）
        const seriesUpdates = [
          {name: '安全指数', data: newData.seriesData1},
          {name: '人员安全', data: newData.seriesData2},
          {name: '生产安全', data: newData.seriesData3},
          {name: '设备安全', data: newData.seriesData4},
          {name: '消防安全', data: newData.seriesData5},
          {name: '环境安全', data: newData.seriesData6},
          {name: '其他', data: newData.seriesData7},
        ];
        this.chart.setOption({
          xAxis: {data: newData.xData},
          legend: {data: newData.legendData},
          series: seriesUpdates
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.line-chart-container {
  width: 100%;
  height: px2vh(270); /* 固定高度，或用 px2vw 适配大屏 */
  /* 大屏适配示例：height: #{px2vh(400)}; */
}
</style>
